<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="/admin/_layouts/default">
<head>
    <title>发送给会员</title>
</head>
<body>
<div layout:fragment="content">
    <div class="modal fade in" id="js-select-model">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="pull-left">
                        <input type="text" id="regexNickname" placeholder="请输入用户名或昵称..">
                    </div>
                    <div class="pull-right tool-button">
                        <button class="btn btn-primary"
                                id="js-add-select">添加选中
                        </button>
                        <button
                                class="btn btn-info"
                                id="js-page-select">
                            <i class="fa fa-thumb-tack"></i> 本页全选
                        </button>
                    </div>
                </div>
                <div class="modal-body">
                    <table id="js-users-table" class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>昵称</th>
                            <th>邮箱</th>
                            <th>状态</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- 内容区域 -->
    <section class="content">
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-xs-12 i-navbar">
                <a class="btn btn-primary" th:href="@{/admin/message/mail/index.html}" data-pjax><i
                        class="fa fa-arrow-left"></i> 返回
                </a>
            </div>
            <div class="col-xs-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <header class="tool-bar">
                            <h3 class="pull-left">发送给会员<span class="label label-default"></span></h3>
                            <div id="step-2" class="pull-right tool-button" style="display: none">
                                <button data-target="#js-select-model"
                                        data-toggle="modal"
                                        class="btn btn-primary">
                                    <i class="fa fa-plus"></i> 选择用户
                                </button>
                                <button class="btn btn-danger" id="js-delete">
                                    <i class="fa fa-trash-o"></i> 移除用户
                                </button>
                            </div>
                        </header>
                    </div>
                    <div class="box-body">
                        <form id="js-form" th:action="@{/admin/message/mail/send}"
                              method="POST"
                              class="stepy">
                            <!--/*@thymesVar id="template" type="in.hocg.web.modules.system.domain.MailTemplate"*/-->
                            <input type="hidden" name="id" th:value="${template.id}">
                            <input type="hidden" name="target" value="0">
                            <input type="hidden" name="ids">
                            <fieldset title="第一步">
                                <legend>设置参数</legend>
                                <div class="form-group">
                                    <label for="defSubject">标题</label>
                                    <input class="form-control" id="defSubject" name="defSubject"
                                           th:value="${template.defSubject}"
                                           placeholder="请输入标题">
                                </div>
                                <div class="form-group">
                                    <label for="params">参数</label>
                                    <textarea class="form-control" id="params" name="params"
                                              th:text="${template.getParamString()}"
                                              placeholder="请输入参数"></textarea>
                                </div>
                                <div class="form-group">
                                    <label>图片及CID</label>
                                    <div th:include="/admin/_widgets/upload-box::upload-box"
                                         th:with="iFiles=${template?.images?.values()},id='UploadImages',var=imagesId,height=3"></div>
                                    <p class="help-block">上传文件的ID即CID，如：logo.png [ID: 5a23ed4d205f044b7c67e9e6]</p>
                                </div>
                                <div class="form-group">
                                    <label>附件</label>
                                    <div th:include="/admin/_widgets/upload-box::upload-box"
                                         th:with="iFiles=${template?.files?.values()},id='UploadFiles',var=filesId,height=3"></div>
                                </div>
                            </fieldset>
                            <fieldset title="第二步">
                                <legend>选择会员</legend>
                                <table id="js-table" class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th>昵称</th>
                                        <th>邮箱</th>
                                        <th>状态</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </fieldset>
                            <button class="stepy-finish btn btn-primary pull-right">完成</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.row -->
    </section>
    <!-- /内容区域 -->
    <script th:inline="javascript">
        var tree;
        $(function () {

            // 完成提交
            $('#js-form').ajaxForm({
                dataType: 'json',
                beforeSubmit: function (arr, form, option) {
                    if (!$('input[name="ids"]').val()) {
                        layer.msg("请先选择用户", {icon: 2});
                        return false;
                    }
                    form.find("button:submit").attr('disable', true);
                    if (form.attr("isSubmit") === undefined) {//与stepy结合使用时，要避免二次提交的问题
                        form.attr("isSubmit", true);
                    } else {
                        form.removeAttr("isSubmit");
                        return false;
                    }
                },
                success: function (data, statusText, xhr, form) {
                    if (data.code === 200) {
                        form.resetForm(); // 重置表单
                        layer.msg(data.message, {icon: 1});
                        $('input[name="ids"]').val("");
                        //回到第一个step
                        $(".stepy").stepy("step", 1);
                        table.reloadPage();
                    } else {
                        layer.msg(data.message, {icon: 2});
                    }
                    form.find("button:submit").attr('disable', false);
                }
            });

            var table;
            // 分步骤
            $(".stepy").stepy({
                backLabel: "上一步",
                nextLabel: "下一步",
                block: false,
                legend: false,
                select: function (step) {
                    $('#step-2').hide();
                    if (step === 2) {
                        $('#step-2').show();
                        if (!table) {
                            table = {
                                $obj: $('#js-table'),
                                dataTableObject: {},
                                getSelectedRow: function () {
                                    return this.dataTableObject.rows('.selected').data();
                                },
                                init: function () {
                                    // 初始化
                                    this.dataTableObject = this.$obj.DataTable({
                                        dom: '<"toolbar">frtip',
                                        ordering: true,
                                        searching: false,
                                        select: true,
                                        autoWidth: true,
                                        processing: false,
                                        serverSide: true,
                                        deferRender: true,
                                        language: DATA_TABLE_CONFIG.language,
                                        preDrawCallback: DATA_TABLE_CONFIG.preDrawCallback,
                                        ajax: {
                                            url: '/admin/system/member/data',
                                            type: 'POST',
                                            contentType: 'application/json',
                                            data: function (params) {
                                                params.ids = $('input[name="ids"]').val().split(',') || null;
                                                // 携带参数
                                                return JSON.stringify(params);
                                            }
                                        },
                                        columns: [
                                            {
                                                data: 'nickname', bSortable: true,
                                                defaultContent: '<span class="text-danger">暂无</span>'
                                            },
                                            {data: 'email', bSortable: true},
                                            {data: 'available', bSortable: true}
                                        ],
                                        order: [[0, "desc"]],
                                        columnDefs: [
                                            {
                                                render: function (data, type, row) { // 状态
                                                    if (!!data) {
                                                        return '<i id="js-' + row.id + '" class="fa fa-circle text-success"></i>';
                                                    } else {
                                                        return '<i id="js-' + row.id + '" class="fa fa-circle text-danger"></i>';
                                                    }
                                                },
                                                targets: 2
                                            }
                                        ]
                                    });
                                    // 绑定多选
                                    this.$obj.children('tbody').on('click', 'tr', function () {
                                        $(this).toggleClass('selected');
                                    });

                                    var that = this;
                                    // ==========================自定义=============================
                                    // + 删除选中 事件
                                    $('#js-delete').on('click', function () {
                                        var selectedRow = that.getSelectedRow();
                                        if (!!selectedRow.length) {
                                            var ids = $('input[name="ids"]').val().split(',');
                                            $.each(selectedRow, function (i, obj) {
                                                ids.splice($.inArray(obj.id, ids), 1);
                                            });
                                            $('input[name="ids"]').val(ids.toString());
                                            table.reloadPage();
                                        }
                                    });
                                },
                                reloadPage: function () {
                                    this.dataTableObject.ajax.reload(null, false);
                                },
                                reloadAll: function () {
                                    this.dataTableObject.ajax.reload();
                                }
                            };
                            table.init();
                        }
                    }
                }, finish: function () {
                }
            });

            var userTable;
            $('#js-select-model').on('shown.bs.modal', function () {
                if (!userTable) {
                    userTable = {
                        $obj: $('#js-users-table'),
                        dataTableObject: {},
                        getSelectedRow: function () {
                            return this.dataTableObject.rows('.selected').data();
                        },
                        init: function () {
                            // 初始化
                            this.dataTableObject = this.$obj.DataTable({
                                dom: '<"toolbar">frtip',
                                ordering: true,
                                searching: false,
                                select: true,
                                autoWidth: true,
                                processing: false,
                                serverSide: true,
                                deferRender: true,
                                language: DATA_TABLE_CONFIG.language,
                                preDrawCallback: DATA_TABLE_CONFIG.preDrawCallback,
                                ajax: {
                                    url: '/admin/system/member/data',
                                    type: 'POST',
                                    contentType: 'application/json',
                                    data: function (params) {
                                        params.noIds = $('input[name="ids"]').val().split(',') || null;
                                        params.regexNickname = $('#regexNickname').val() || '';
                                        // 携带参数
                                        return JSON.stringify(params);
                                    }
                                },
                                columns: [
                                    {
                                        data: 'nickname', bSortable: true,
                                        defaultContent: '<span class="text-danger">暂无</span>'
                                    },
                                    {data: 'email', bSortable: true},
                                    {data: 'available', bSortable: true}
                                ],
                                order: [[0, "desc"]],
                                columnDefs: [
                                    {
                                        render: function (data, type, row) { // 状态
                                            if (!!data) {
                                                return '<i id="js-' + row.id + '" class="fa fa-circle text-success"></i>';
                                            } else {
                                                return '<i id="js-' + row.id + '" class="fa fa-circle text-danger"></i>';
                                            }
                                        },
                                        targets: 2
                                    }
                                ]
                            });
                            // 绑定多选
                            this.$obj.children('tbody').on('click', 'tr', function () {
                                $(this).toggleClass('selected');
                            });

                            var that = this;
                            // ==========================自定义=============================
                            // 本页全选
                            $('#js-page-select').on('click', function () {
                                that.$obj.find("tbody tr").each(function () {
                                    if (!$(this).hasClass('selected')) {
                                        $(this).addClass('selected');
                                    }
                                });
                            });

                            // 添加选中
                            $('#js-add-select').on('click', function () {
                                var cks = that.dataTableObject.rows('.selected').data();
                                if (!!cks.length) {
                                    var ids = $('input[name="ids"]').val();
                                    ids = !!ids ? (ids + ',') : '';
                                    $.each(cks, function (i, o) {
                                        if (ids.split(',').indexOf(o.id) === -1) {
                                            ids += (o.id + ',');
                                        }
                                    });
                                    ids = ids.substring(0, ids.length - 1);
                                    $('input[name="ids"]').val(ids);
                                    table.reloadPage();
                                }
                            });

                            // 搜索
                            $('#regexNickname').on('keyup', function () {
                                that.reloadAll();
                            });
                        },
                        reloadPage: function () {
                            this.dataTableObject.ajax.reload(null, false);
                        },
                        reloadAll: function () {
                            this.dataTableObject.ajax.reload();
                        }
                    };
                    userTable.init();
                }
                userTable.reloadPage();
            });

        });
    </script>
</div>
</body>
</html>
